<template>
  <div class="search">
    <nav class="searchList-nav" ref="change">
      <span :class="{isActive:toggle==='Staffs'}" @click="handleChangeView('Staffs')">乐谱</span>
      <span :class="{isActive:toggle==='StaffList'}" @click="handleChangeView('StaffList')">乐谱集</span>
    </nav>
    <component :is="currentView"></component>
  </div>
</template>

<script>
import SearchStaffList from '../components/search/SearchStaffList'
import SearchStaffs from '../components/search/SearchStaffs'

export default {
  name: "Search",
  components: {
    SearchStaffList,
    SearchStaffs
  },
  data() {
    return {
      toggle: 'Staffs',//跳转到那个页面
      currentView: 'SearchStaffs'
    }
  },
  methods: {
    //切换组件
    handleChangeView(component) {
      this.currentView = 'Search' + component;
      this.toggle = component;
    }
  },
}
</script>

<style lang="scss" scoped>
@import '../assets/css/search.scss';
</style>
